<template>
  <div class="invite">
    <van-list v-model="loading" :finished="finished"  @load="onLoad">
      <template v-if="list.length > 0">
        <div class="item" v-for="item in list" :key="item.id">
          <div class="left">
            <img :src="item.face">
            <span class="user">{{item.nickname}}</span>
          </div>
          <div class="right">
            <span>本月已购买{{item.buy_number}}桶水</span>
          </div>
        </div>
      </template>
      <template v-else>
        <EmptyTips mWidth="30" mHeight="30" :image="NoMemberEmpty" text="当前没有下线用户，快去邀请好友吧~" />
      </template>
    </van-list>
  </div>
</template>

<script>
import api from "../../api";
import avatar from "../../assets/avatar/avatar.jpeg";
import EmptyTips from "@/components/common/EmptyTips";
import ActionButton from "@/components/common/ActionButton";
import NoMemberEmpty from '../../assets/common/no-member-empty.png'

export default {
  title: "我的邀请",
  components: {
    EmptyTips,
    ActionButton
  },
  data() {
    return {
      NoMemberEmpty,
      uid: this.$store.state.uid,
      page: 1,
      list: [],
      loading: false,
      finished: false,
      avatar,
      username: "小仙女"
    };
  },
  methods: {
    onLoad() {
      api.usercenter.getFansLists(
        this.uid,
        this.page,
        res => {
          console.log(res);

          if (res.pager.totalPages <= res.pager.nowPage) {
            this.loading = false;
            this.finished = true;
          }

          if (res.data.list.length < 1) {
            this.finished = true;
          }

          for (var i = 0; i < res.data.list.length; i++) {
            this.list.push(res.data.list[i]);
          }

          this.page += 1;
          this.loading = false;
        },
        res => {
          this.loading = false;
          this.finished = true;
          this.$toast(res.msg);
        }
      );
    }
  },
  mounted() {
    // this.getFansLists();
  }
};
</script>

<style lang="less" scoped>
.invite {
  .item {
    display: flex;
    justify-content: space-between;
    padding: 4vw;
    border-bottom: 1px solid #f9f9f9;
    .left {
      display: flex;
      align-items: center;
      font-size: 4vw;
      img {
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
        margin-right: 3vw;
      }
    }
    .right {
      display: flex;
      align-items: center;
      font-size: 3.5vw;
    }
  }
}
</style>